<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/nhdb.png" alt="">
      </div>
      <h2>能耗对比</h2>
    </div>
    <div class="house_cont">
      <div class="house_left">
        <div class="item">
          <h2>{{ this.arr.save_front }}</h2>
          <h3>节能前(MWh/千吨)</h3>
        </div>
        <div class="item">
          <h2>{{ this.arr.save_after }}</h2>
          <h3>节能后(MWh/千吨)</h3>
        </div>
      </div>
      <div class="house_echarts">
        <div class="house_main"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      arr: []
    }
  },
  async created() {
    const id = { tenantid: 1128 }
    const res = await api.ElecContrast(id)
    this.arr = res.data
    // console.log(this.arr)
    this.initChart(res.data)
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  },
  methods: {
    // 图表初始化
    initChart(data) {
      this.myChart = this.$echarts.init(document.querySelector('.house_main'))
      const colors = ['#ffae00', '#24e1ae']
      // 水量（x轴）
      let xData = []
      data.xdata.forEach(item => {
        xData.push(item.replace('[', '').replace(']', '').split(','))
      })
      // 节能前（Y轴）
      let elec = []
      data.elec.forEach(item => {
        elec.push(item.replace('[', '').replace(']', '').split(','))
      })
      // 节能后（Y轴）
      let save_elec = []
      data.save_elec.forEach(item => {
        save_elec.push(item.replace('[', '').replace(']', '').split(','))
      })
      // 节能后的散点图
      let save_elecs = []
      data.save_elecs.forEach(item => {
        save_elecs.push(item.replace('[', '').replace(']', '').split(','))
      })
      // 节能前散点图
      let elecs = []
      data.elecs.forEach(item => {
        elecs.push(item.replace('[', '').replace(']', '').split(','))
      })
      this.myChart.setOption({
        tooltip: {
          trigger: 'item',
          showContent: false,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
          },
          extraCssText: 'background: #023881;border:none;color:#fff;opacity: 1;',
          // formatter(params) {
          //   console.log(params)
          //   let res = []
          //   params.forEach((v)=>{
          //     res.push(`<span style="font-size: 0.12rem;">${v.seriesName}：<span style="color: #058cff">${v.value ? v.value : ''}</span></span>`)
          //   })
          //   return res.join('<br />')
          // }
        },
        grid: {
          // right: '25%',
          // top: '23%',
          bottom: '15%',
          // left: '15%',
          // x: "12%",//x 偏移量
          // y: "7%", // y 偏移量
          width: '75%', // 宽度
          height: '60%'
        },
        color: colors,
        xAxis: [
          {
            type: 'value',
            position: 'left',
            name: '供水量/㎡',
            data: xData,
            nameTextStyle: {
              // padding: [0, 0, 0, 30] // 上右下左与原位置距离
              color: '#3bdfd3'
            },
            boundaryGap: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5fa1ff'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#3bdfd3'
              }
            },
            // 网格线
            splitLine: {
              show: true,
              lineStyle: {
                type: 'line',
                color: '#427fd5'
              }
            },
            axisTick: {
              show: true,
              inside: true,
              length: 3
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            position: 'left',
            name: '耗电量/MWh',
            nameTextStyle: {
              // padding: [0, 0, 0, 30] // 上右下左与原位置距离
              color: '#3bdfd3'
            },
            splitNumber: 6,
            // 网格线
            splitLine: {
              show: true,
              lineStyle: {
                type: 'line',
                color: '#427fd5'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5fa1ff'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#3bdfd3'
              }
            },
            axisTick: {
              show: true,
              inside: true,
              length: 3
            }
          },
        ],
        legend: {
          data: ['节能前', '节能后'],
          top: '5%',
          itemHeight: 8,
          itemWidth: 12,
          textStyle: {
            color: colors,
            fontSize: '0.12rem'
          }
          // textStyle: {
          //   color: ['#f8aa03','#066ded','#24dcac'],
          //   fontSize: '12px'
          // }
        },
        series: [
          {
            name: '节能前',
            zlevel: 3,
            type: 'line',
            symbol: 'none',
            data: elec,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#ffae00', //改变折线颜色
                },
              },
            },
          },
          {
            name: '节能后',
            zlevel: 3,
            type: 'line',
            symbol: 'none',
            data: save_elec,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#24e1ae', //改变折线颜色
                },
              },
            },
          },
          {
            name: '节能前散点图',
            symbolSize: 5,
            zlevel: 5,
            data: elecs,
            type: 'scatter',
            itemStyle: {
              normal: {
                color: '#ffae00', //改变折线颜色
              },
            },
          },
          {
            name: '节能后散点图',
            symbolSize: 5,
            zlevel: 5,
            data: save_elecs,
            type: 'scatter',
            itemStyle: {
              normal: {
                color: '#24e1ae', //改变折线颜色
              },
            },
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.modular {
  .modular_top {
    left: -0.8%;
  }

  .house_cont {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .house_left {
      width: 25%;
      padding-left: 0.3rem;
      padding-top: 0.88rem;
      display: flex;
      flex-direction: column;

      .item {
        width: 1.7rem;
        height: 0.88rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: linear-gradient(135deg, rgba(69, 113, 202, 0.8000), #1C3768);
        box-shadow: 0px 6px 9px 1px rgba(7, 27, 57, 0.4000);
        // opacity: 0.4;
        border-radius: 3px;
        margin-bottom: 0.14rem;

        h2 {
          font-size: 0.35rem;
          font-family: 'Pang';
          font-weight: 400;
          color: #FFAE00;
        }

        h3 {
          font-size: 0.12rem;
          color: #FFFFFF;
          background: linear-gradient(0deg, #33A2F7 0%, #ACEEFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        &:nth-child(2) {
          h2 {
            color: #24E1AE;
          }
        }
      }
    }

    .house_echarts {
      padding-top: 0.4rem;
      width: 75%;
      height: 85%;

      .house_main {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>